<template>
  <ScreenAdapter>
    <div id="box" class="bg">

      <header>
        <div class="title">金华市工伤智控<span style="font-size: 2rem">(基金)</span></div>
        <div class="datetime">
          <div class="time">15:25:25</div>
          <div class="date">
            <div class="week">星期四</div>
            <div>2022.01.27</div>
          </div>
        </div>
      </header>

      <main>
        <!--  页面右侧   -->
        <div class="right">
          <!--  表：浙里办应用使用量  -->
          <div class="right_data1">
            <div class="table_title height_right3">浙里办应用使用量</div>
            <div id="pie2" style="height: 100%;"></div>
          </div>
          <!--  表：工伤医疗费用支出  -->
          <div class="right_data2">
            <div class="table_title height_right1">工伤医疗费用支出</div>
            <div class="data3_table_top">
              <div class="data3_table_top_img"/>
              <div class="data3_table_top_text">费用支出</div>
              <dv-digital-flop :config="config" class="data1_text4"/>
              <span class="data1_text3">个</span>
            </div>
            <dv-scroll-board :config="config_data2" class="data2_table"/>
          </div>
          <div class="right_data3">
            <div class="table_title height_right1">支付能力排行</div>
            <div id="table_right3" style="width: 100%;height: 100%"/>
          </div>
        </div>
        <!--  页面左侧   -->
        <div class="left">
          <!--  表：工伤收支情况(近5年)  -->
          <div class="insured">
            <div class="table_title height_left1">工伤收支情况(近5年)</div>
            <div id="table_left1" style="width: 100%;height: 80%"/>
          </div>
          <!--  表：工伤基金收支差额(近6个月)  -->
          <div class="box_left2">
            <div class="table_title height_left2">工伤基金收支差额(近6个月)</div>
            <div id="table_left2" style="width: 110%;height: 70%;"/>
          </div>
          <!--  表：各行业工伤基金收支TOP10  -->
          <div class="data3_table">
            <div class="table_title height_left3">各行业工伤基金收支TOP10</div>
            <!--          <div id="pie1" style="height: 100%"></div>-->
            <div style="width:55%;height:90%;float: left">
              <dv-active-ring-chart :config="config_pie" style="width:100%;height:100%;"/>
            </div>
            <div style="float: left;width:40%;margin-right: 5%;color: #fff;margin-top: 6%;">
              <div v-for="(item,index) in data_pie" :key="index">
                <div style="display: inline-block;float: left;width: 15px;height: 6px;margin-top: 3%"
                     :style="'backgroundColor:' + item.color"></div>
                <div style="display: inline-block;float: left;font-size: 0.8rem;margin-left: 2%">{{ item.industry }}
                </div>
                <div style="display: inline-block;float: right">{{ item.proportion }}%</div>
                <br>
              </div>
            </div>
          </div>
        </div>
        <!--  页面中部    -->
        <div class="middle">
          <!--  页面中部--顶部数据栏     -->
          <div class="data_mid_1">
            <!--  页面中部--顶部数据栏--单个显示块        -->
            <div class="data1" v-for="(item, index) in data_mid" :key="index">
              <div class="data1_img" :style="{background: 'url(' + item.img + ')'}"></div>
              <div class="data1_right">
                <div class="data1_text1">{{ item.text }}</div>
                <!--              <dv-digital-flop :config="config" class="data1_text2"/>-->
                <div class="data1_text2">100</div>
                <div class="data1_text5">{{ item.unit }}</div>
              </div>
            </div>
          </div>
          <!--  地图  -->
          <div id="charsMap" class="map" ref="chartMap"/>
          <!--   页面中部--底部数据栏     -->
          <div class="data_mid_2">
            <!--    页面中部--底部数据栏--标题      -->
            <div class="data2_title"> 工伤联网结算</div>
            <!--    页面中部--底部数据栏--轮播表      -->
            <dv-scroll-board :config="config_data3" class="data_table"/>
          </div>
        </div>

      </main>

      <footer>
        <div class="btn_bottom_box">
          <div class="btn_bottom" v-for="(item, index) in data_bottom" :key="index" @click="goTo(item.pathName)">
            <div class="btn_bottom_img" :style="{background: 'url(' + item.img + ')'}"/>
            <div class="btn_bottom_text">{{ item.text }}</div>
          </div>
        </div>
      </footer>

    </div>
  </ScreenAdapter>
</template>

<script>
import axios from "axios"
import ScreenAdapter from '../components/ScreenAdapter'

const echarts = require('echarts')
const echartsGl = require('echarts-gl')
const Highcharts = require('highcharts')

export default {
  name: "fund",
  components: {
    ScreenAdapter,
  },
  data() {
    return {
      data_pie: [
        {
          color: '#DD001B',
          industry: '建筑业',
          proportion: 15
        },
        {
          color: '#FD6431',
          industry: '保险业',
          proportion: 10
        },
        {
          color: '#F48C90',
          industry: '房地产',
          proportion: 15
        },
        {
          color: '#71C9FD',
          industry: '计算机',
          proportion: 13
        },
        {
          color: '#50A1F7',
          industry: '服装业',
          proportion: 10
        },
        {
          color: '#A16D08',
          industry: '公益组织',
          proportion: 9
        },
        {
          color: '#D6EBAA',
          industry: '广告业',
          proportion: 7
        },
        {
          color: '#29AB91',
          industry: '航空航天',
          proportion: 5
        },
        {
          color: '#D6E0F2',
          industry: '金融业',
          proportion: 4
        },
        {
          color: '#FEEDE8',
          industry: '因特网',
          proportion: 3
        },
      ],
      config_pie: {
        radius: '60%',
        activeRadius: '70%',
        color: ['#DD001B', '#FD6431', '#F48C90', '#71C9FD', '#50A1F7', '#A16D08', '#D6EBAA', '#29AB91', '#D6E0F2', '#FEEDE8'],
        data: [
          {
            name: '建筑业',
            value: 15,
          },
          {
            name: '保险业',
            value: 10
          },
          {
            name: '房地产',
            value: 15
          },
          {
            name: '计算机',
            value: 13
          },
          {
            name: '服装业',
            value: 10
          },
          {
            name: '公益组织',
            value: 9
          },
          {
            name: '广告业',
            value: 7
          },
          {
            name: '航空航天',
            value: 5
          },
          {
            name: '金融业',
            value: 4
          },
          {
            name: '因特网',
            value: 3
          },
        ],
        digitalFlopStyle: {
          fontSize: 20
        },
        showOriginValue: true
      },
      config: {
        number: [100],
        content: '{nt}',
        style: {
          fontSize: 28,
          fill: '#FDD532',
        },
      },
      config_data2: {
        header: ['费用区间', '笔数', '金额'],
        data: [
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [55],
        rowNum: 4,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      config_data3: {
        header: ['姓名 ', '身份证', '统筹区', '医院', '时间', '金额'],
        data: [
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [65],
        rowNum: 4,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      data_mid: [
        {
          unit: '个',
          text: '参保人数',
          img: require('../assets/data_mid_1_1.png')
        },
        {
          unit: '个',
          text: '案件数',
          img: require('../assets/data_mid_1_2.png')
        },
        {
          unit: '%',
          text: '事故率',
          img: require('../assets/data_mid_1_3.png')
        }
      ],
      data_left: [
        {
          text: '基金收入',
          img: require('../assets/data_left_1.png')
        },
        {
          text: '基金支出',
          img: require('../assets/data_left_2.png')
        }
      ],
      data_right: [
        [{
          text: '应急局',
          num: '11',
          img: require('../assets/data_right_1.png')
        },
          {
            text: '交通局',
            num: '22',
            img: require('../assets/data_right_2.png')
          },
          {
            text: 'XX局',
            num: '31',
            img: require('../assets/data_right_3.png')
          }],
        [{
          text: 'XX局',
          num: '34',
          img: require('../assets/data_right_4.png')
        },
          {
            text: 'XX局',
            num: '31',
            img: require('../assets/data_right_5.png')
          },
          {
            text: 'XX局',
            num: '16',
            img: require('../assets/data_right_6.png')
          }],
      ],
      data_bottom: [
        {
          text: '主屏',
          img: require('../assets/btn_img1.png'),
          pathName: 'Index'
        },
        {
          text: '全域预防',
          img: require('../assets/btn_img2.png'),
          pathName: 'Fund'
        },
        {
          text: '精准智控',
          img: require('../assets/btn_img3.png'),
          pathName: 'CaseAnalysis'
        },
        {
          text: '安心工伤',
          img: require('../assets/btn_img4.png'),
          pathName: ''
        }
      ],
      gssz: {
        xData: [],
        income: [],
        expenditure: [],
        balance: []
      },
    }
  },
  created() {
    // 注册金华地图
    echarts.registerMap("jh", require("../../static/jinhua.json"));
    echarts.registerMap("jhLine", require("../../static/jinhua_outline.json"));
  },
  mounted() {
    this.init();
    this.echartsTableInit();
    this.echartsTableInit2();
    this.echartsTableInit4();
    //this.highchartsInit_pie1()
    this.highchartsInit_pie2();
    this.echartsMap_([
      {name: '婺城区', value: 1.2, detail: [123, 123, 123, 123, 8]},
      {name: '金东区', value: 1.2, detail: [123, 123, 123, 123, 8]},
      {name: '永康市', value: 8.9, detail: [123, 123, 123, 123, 8]},
      {name: '武义县', value: 1.2, detail: [123, 123, 123, 123, 8]},
      {name: '浦江县', value: 4.0, detail: [123, 123, 123, 123, 8]},
      {name: '义乌市', value: 1.2, detail: [123, 123, 123, 123, 8]},
      {name: '兰溪市', value: 1.2, detail: [123, 123, 123, 123, 8]},
      {name: '东阳市', value: 5.2, detail: [123, 123, 123, 123, 8]},
      {name: '磐安县', value: 1.2, detail: [123, 123, 123, 123, 8]},
    ]);
  },
  methods: {
    init() {
      let result = {
        list: [
          {sz02: '2017', sz03: 35, sz04: 29, sz05: 20},
          {sz02: '2018', sz03: 30, sz04: 33, sz05: 12},
          {sz02: '2019', sz03: 42, sz04: 35, sz05: 15},
          {sz02: '2020', sz03: 48, sz04: 39, sz05: 25},
          {sz02: '2021', sz03: 32, sz04: 26, sz05: 17},
        ]
      }
      for (let item of result.list) {
        this.gssz.xData[this.gssz.xData.length] = item.sz02;
        this.gssz.income[this.gssz.income.length] = item.sz03;
        this.gssz.expenditure[this.gssz.expenditure.length] = item.sz04;
        this.gssz.balance[this.gssz.balance.length] = item.sz05;
      }
      console.log(this.gssz)
    },
    highchartsInit_pie1() {
      const chart = Highcharts.chart('pie1', {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
              enabled: true,
              format: '{point.name}'
            }
          }
        },
        series: [{
          type: 'pie',
          name: '',
          data: [
            ['数据1', 45.0],
            ['数据2', 26.8],
            {
              name: '数据6',
              y: 12.8,
              sliced: true,
              selected: true
            },
            ['数据3', 8.5],
            ['数据4', 6.2],
            ['数据5', 0.7]
          ]
        }]
      });
    },
    highchartsInit_pie2() {
      const chart = Highcharts.chart('pie2', {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 65,
            beta: 0
          }
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          x: 0,
          y: 100
        },
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 15,
            dataLabels: {
              enabled: false,
              format: '{point.name}'
            }
          },
          borderWidth: 0.2,
          offset: 20
        },
        series: [{
          type: 'pie',
          name: '',
          data: [
            ['数据1', 45.0],
            ['数据2', 26.8],
            {
              name: '数据6',
              y: 12.8,
              sliced: true,
              selected: true
            },
            ['数据3', 8.5],
            ['数据4', 6.2],
            ['数据5', 0.7]
          ]
        }]
      });
    },
    echartsTableInit() {
      const myChart = echarts.init(document.getElementById("table_left1"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '25%',
          right: '0%',
          bottom: '20%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '7%',
          right: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出', '基金结余'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: this.gssz.xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "万元",
            min: 0,
            max: 60,
            interval: 20,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 9,
            data: this.gssz.income,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#3E9DF3'
              }
            },
          },
          {
            name: '基金支出',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.gssz.expenditure,
            barWidth: 9,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#E5772D'
              }
            },
          },
          {
            name: '基金结余',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#46D3CB'
              }
            },
            data:this.gssz.balance
          }
        ]
      }
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      option && myChart.setOption(option);
    },
    echartsTableInit2() {
      const myChart = echarts.init(document.getElementById("table_left2"))
      const option = {
        grid: {
          top: '30%',
          right: '10%',
          bottom: '12%',
          left: '13%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '7%',
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: ['7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元',
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [26, 35, 34, 45, 37, 38]
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B'
              }
            },
            data: [18, 22, 17, 33, 22, 24]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    echartsTableInit3() {
      const myChart = echarts.init(document.getElementById("table_left3"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['单位', '个人'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'],
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "次",
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: [31, 26, 27, 41, 32, 28, 25, 29],
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#08244C" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#2A76F2" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '个人',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [26, 23, 29, 39, 30, 27, 23, 26],
            barWidth: 7,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#54FFFF'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    echartsTableInit4() {
      const myChart = echarts.init(document.getElementById("table_right3"))
      const salvProName = ["金华市", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"];
      const salvProValue = [10, 8, 7, 6, 5, 4.5, 4, 3];
      const salvProValue2 = ['10个月', '8个月', '7个月', '6个月', '5个月', '4.5个月', '4个月', '3个月'];
      const salvProMax = [];//背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
      }
      const option = {
        // backgroundColor: "#003366",
        grid: {
          left: '6%',
          right: '2%',
          bottom: '2%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: salvProName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12'
            },
          },
          data: salvProValue2
        }],
        series: [{
          name: '值',
          type: 'bar',
          barWidth: 6,
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(57,89,255,1)'
              }, {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }]),
            },
          },
          data: salvProValue
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 6,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: 'rgba(30,43,58,1)',
                barBorderRadius: 30,
              }
            },
          },
        ]
      };
      option && myChart.setOption(option);
    },
    echartsMap_(data) {
      let imgElement = new Image()
      imgElement.src = require('../assets/bg.png')
      let redData = data.filter(item => item.value >= 8)
      console.log(redData)
      let cityPoint = {
        "婺城区": [119.652579, 29.082607],
        "金东区": [119.681264, 29.095835],
        "武义县": [119.819159, 28.896563],
        "浦江县": [119.893363, 29.451254],
        "磐安县": [120.44513, 29.052627],
        "兰溪市": [119.460521, 29.210065],
        "义乌市": [120.074911, 29.306863],
        "东阳市": [120.23334, 29.262546],
        "永康市": [120.036328, 28.895293],
      }
      let colorList = [
        {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,0,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,165,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,255,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(60,179,113,0.89)'},
            {offset: 1, color: 'rgba(9,43,90,0.2)'}
          ],
        },
      ]
      let option = {
        visualMap: {
          pieces: [
            {min: 8, label: '红色区域(>8%)', color: colorList[0]},
            {min: 4, max: 8, label: '橙色区域(4~8%)', color: colorList[1]},
            {min: 2, max: 4, label: '黄色区域(2~4%)', color: colorList[2]},
            {max: 2, label: '绿色区域(<2%)', color: colorList[3]},
          ],
          inRange: {
            symbol: 'circle'
          },
          outOfRange: {
            symbol: 'circle'
          },
          textStyle: {
            color: '#fff'
          },
          seriesIndex: 0,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'transparent',
          formatter: params => {
            if (params.seriesIndex || !params.data) return ''
            let data = params
            return `<div class="chart_tip_4f795181">
                      <div class="chart_tip_4f795181_title">${data.name}</div>
                      <div class="chart_tip_4f795181_text">参保人数 <span unit="人">${data.data.detail[0]}</span></div>
                      <div class="chart_tip_4f795181_text">基金收入 <span unit="万元">${data.data.detail[1]}</span></div>
                      <div class="chart_tip_4f795181_text">基金支出 <span unit="万元">${data.data.detail[2]}</span></div>
                      <div class="chart_tip_4f795181_text">案件数 <span unit="件">${data.data.detail[3]}</span></div>
                      <div class="chart_tip_4f795181_text">事故率 <span unit="">${data.data.detail[4]}%</span></div>
                    </div>`
          }
        },
        geo: [
          {
            map: 'jh',
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#10244D',
              borderWidth: 1,
              opacity: 0.8,
              borderColor: '#68ABC6'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: '15',
            },
            selectedMode: false,
            emphasis: {
              label: {
                color: '#fff',
                fontSize: '15',
              },
              itemStyle: {
                areaColor: 'rgba(111,238,248,0.5)',
                borderWidth: 1,
                borderColor: '#68ABC6'
              },
            },
            z: 5
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            itemStyle: {
              /*areaColor: {
                image: imgElement
              },*/
              areaColor: '#0E3870',
              borderColor: '#e5edf1',
              borderWidth: 1.5,
              shadowBlur: 15,
              shadowColor: 'rgba(255,255,255,0.1)',
            },
            silent: true,
            z: 4
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '47.5%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#6FEEF8',
              borderWidth: 0,
            },
            silent: true,
            z: 3
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '49%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#3866E2',
              borderWidth: 0,
            },
            silent: true,
            z: 2
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '50.5%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#273C8C',
              borderWidth: 0,
            },
            silent: true,
            z: 1
          },
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: data
          }, {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'triangle',
            symbolSize: 12,
            symbolRotate: 180,
            itemStyle: {
              color: {
                type: 'linear', x2: 0, y2: 1,
                colorStops: [
                  {color: '#ff0000', offset: 0},
                  {color: 'rgba(255,0,0,0.5)', offset: 1},
                ]
              }
            },
            label: {
              show: true,
              formatter: '{text|{b}}',
              position: 'top',
              rich: {
                text: {
                  color: '#fff',
                  fontSize: 16,
                  fontWeight: 'bold',
                  width: 70,
                  height: 24,
                  align: 'center',
                  backgroundColor: '#E94D6C',
                  borderRadius: 3
                }
              }
            },
            data: redData.map(item => {
              return {
                name: item.name,
                value: cityPoint[item.name]
              }
            }),
            z: 8
          }
        ]
      }
      let myChart = echarts.init(this.$refs.chartMap)
      myChart.setOption(option)
    },
    data_mid_1() {
      let temp = {...this.config}
      temp.number[0] += 100
      this.config = {...temp}
    },
    goTo(pathName) {
      this.$router.push({
        name: pathName
      });
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

.bg {
  background: url("../assets/bg.png") no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  position: fixed;
  margin-top: -60px;
  margin-left: -8px;
}

.map {
  height: 66%;
  width: 100%;
  margin: 0 auto;
  background: url("../assets/map_bg.png") no-repeat center;
  overflow: hidden;
  background-size: contain;
}

.title {
  display: inline-block;
  float: left;
  margin-top: .5rem;
  margin-left: 38%;
  color: #D9EBFA;
  font-size: 2.6rem;
  font-weight: 600;
}

.datetime {
  display: inline-block;
  float: right;
  width: 13%;
  height: 4%;
  margin-right: 8%;
  margin-top: 1.2rem;
  color: #D9EBFA;
}

.time {
  display: inline-block;
  float: left;
  margin-top: 4%;
  font-size: 1.6rem;
}

.date {
  display: inline-block;
  float: right;
  font-size: .9rem;
}

.week {
  float: right;
}

.data_mid_1 {
  width: 74%;
  height: 9%;
  margin: 0 auto;
}

.data1 {
  float: left;
  height: 100%;
  width: 31%;
  margin: 0 1%;
}

.data1_right {
  float: left;
  color: #fff;
  width: 58%;
  height: 88%;
  padding-top: 5%;
}

.data1_img {
  float: left;
  height: 100%;
  height: 100%;
  width: 40%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-left: 2%;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 10px;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 55%;
  height: 70%;
  margin-left: 10%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.data1_text4 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 2.5%;
}

.data1_text3 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 5.8%;
  color: #FBD533;
}

.data1_text5 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 15%;
  margin-left: 5%;
  color: #FBD533;
}

.data_mid_2 {
  width: 100%;
  height: 25%;
}

.data2_title {
  background: url("../assets/subtitle_long.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 100%;
  line-height: 180%;
  margin-bottom: 1%;
  margin-top: .5%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #DCF3FF;
}

.data2_table {
  margin-left: 6%;
  width: 94%;
  height: 58%;
}

.data_table {
  margin-left: 3.5%;
  width: 96.5%;
  height: 70%;
}

.data3_table_top {
  width: 100%;
  height: 24%;
}

.data3_table_top_img {
  background: url("../assets/data_left_3.png");
  overflow: hidden;
  background-size: cover;
  height: 100%;
  width: 22%;
  margin-left: 4%;
  float: left;
}

.data3_table_top_text {
  float: left;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4%;
}

.btn_bottom_box {
  height: 60%;
  width: 40%;
  margin: 1.5% auto;
}

.btn_bottom {
  float: left;
  height: 100%;
  width: 23%;
  margin-right: 2%;
}

.btn_bottom :hover {
  color: #F9D494;
}

.btn_bottom_img {
  float: left;
  height: 90%;
  width: 27%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-right: 4%;
}

.btn_bottom_text {
  display: inline-block;
  float: left;
  width: 55%;
  margin: 12% 0;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  font-style: italic;
  text-align: left;
}

.middle {
  height: 100%;
  width: 45%;
  margin: 0 auto;
}

.left {
  float: left;
  height: 100%;
  width: 26%;
}

.table_left3 {
  width: 100%;
  height: 80%;
  margin-top: 1%;
}

.right_data1 {
  height: 35%;
  width: 100%;
}

.right_data2 {
  height: 35%;
  width: 100%;
}

.right_data3 {
  margin-top: 3%;
  height: 30%;
  width: 100%;
}

.right_data2_box1 {
  height: 21%;
  width: 94%;
  margin-top: 7%;
  margin-left: 6%;
}

.right_data2_item {
  float: left;
  height: 100%;
  width: 30%;
  margin-right: 3%;
}

.right_data2_img1 {
  float: left;
  height: 85%;
  width: 35%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.right_data2_img2 {
  float: left;
  margin-top: 1%;
  margin-left: 3%;
  background: url("../assets/subtitle_shortest.png");
  background-size: cover;
  overflow: hidden;
  height: 42%;
  width: 55%;
  color: white;
  font-size: .8rem;
}

.text_white {
  color: white;
  height: 45%;
  width: 45%;
  float: left;
  margin-left: 5%;
  text-align: left;
}

.right_data2_text {
  font-weight: 600;
  font-size: .9rem;
}

.insured {
  height: 35%;
  width: 100%;
}

.box_left2 {
  height: 30%;
  width: 100%;
}

.data3_table {
  width: 100%;
  height: 35%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_left1 {
  height: 18%;
  line-height: 170%;
}

.height_left2 {
  height: 14%;
  line-height: 170%;
}

.height_left3 {
  height: 15%;
  line-height: 170%;
}

.height_right1 {
  height: 18%;
  line-height: 200%;
}

.height_right2 {
  height: 14%;
  line-height: 200%;
}

.height_right3 {
  height: 15%;
  line-height: 180%;
}

.data_left {
  height: 20%;
  width: 94%;
  margin: 1% 6%;
}

.data_left_item {
  float: left;
  height: 100%;
  width: 35%;
  margin: 0 3%;
}

.data_left_img {
  float: left;
  height: 75%;
  width: 30%;
  margin-top: 5%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.data_left_text {
  display: inline-block;
  float: left;
  width: 65%;
  height: 100%;
}

.right {
  float: right;
  height: 100%;
  width: 26%;
}

main {
  margin: 6% auto;
  height: 81%;
  width: 96%;
}

footer {
  background: url("../assets/footer.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  height: 8.2%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>
